import React, { Component } from 'react'
import styles from "../assets/styles/taba.module.css"
import Model from './Model'
import Pageing from './Pageing'

export default class TabA extends Component {
    state = {
        searchType: "",
        searchData: "",
        tableData: [
            {
                time: [
                    "2021-01-13 17:39:42",
                    "2023-01-13 17:39:42"
                ],
                useTime: [
                    "2023-01-13 17:39:42",
                    "2023-02-13 17:39:42"
                ],
                _id: "63919f95024a7602dc78082a",
                title: "测试优惠券",
                receiveType: "2",
                price: 300,
                state: false,
                show: false,
                system_data: true,
                create_time: "2022-12-08T08:25:57.209Z",
                imgSrc: "https://pic.616pic.com/ys_bnew_img/00/06/12/6QLoLGyq3C.jpg"
            },
            {
                time: [
                    "2021-01-13 17:39:42",
                    "2023-01-13 17:39:42"
                ],
                useTime: [
                    "2022-01-13 17:39:42",
                    "2024-01-13 17:39:42"
                ],
                _id: "63bd14c40d58511b7c6b6b18",
                title: "跨店满减",
                receiveType: "1",
                price: 300,
                state: true,
                show: true,
                create_time: "2023-01-10T07:33:24.011Z",
                imgSrc: "https://pic2.zhimg.com/v2-12943651b8b7fb48144151e638c8ed81_1440w.jpg?source=172ae18b"
            },
            {
                time: [
                    "2021-01-13 17:39:42",
                    "2023-01-13 17:39:42"
                ],
                useTime: [
                    "2022-01-13 17:39:42",
                    "2024-01-13 17:39:42"
                ],
                _id: "63bd14c40d58511b7c6b6b19",
                title: "新人券",
                receiveType: "2",
                price: 300,
                state: true,
                show: true,
                create_time: "2023-01-10T07:33:24.011Z",
                imgSrc: "https://pic2.zhimg.com/v2-12943651b8b7fb48144151e638c8ed81_1440w.jpg?source=172ae18b"
            },
            {
                time: [
                    "2021-01-13 17:39:42",
                    "2023-01-13 17:39:42"
                ],
                useTime: [
                    "2022-01-13 17:39:42",
                    "2024-01-13 17:39:42"
                ],
                _id: "63bd14c40d58511b7c6b6b20",
                title: "满100减20",
                receiveType: "3",
                price: 300,
                state: true,
                show: true,
                create_time: "2023-01-10T07:33:24.011Z",
                imgSrc: "https://pic2.zhimg.com/v2-12943651b8b7fb48144151e638c8ed81_1440w.jpg?source=172ae18b"
            },
            {
                time: [
                    "2021-01-13 17:39:42",
                    "2023-01-13 17:39:42"
                ],
                useTime: [
                    "2022-01-13 17:39:42",
                    "2022-01-15 17:39:42"
                ],
                _id: "63bd14c40d58511b7c6b6b21",
                title: "数码产品券",
                receiveType: "1",
                price: 300,
                state: true,
                show: true,
                create_time: "2023-01-10T07:33:24.011Z",
                imgSrc: "https://pic2.zhimg.com/v2-12943651b8b7fb48144151e638c8ed81_1440w.jpg?source=172ae18b"
            },
            {
                time: [
                    "2021-01-13 17:39:42",
                    "2023-01-13 17:39:42"
                ],
                useTime: [
                    "2022-01-13 17:39:42",
                    "2022-02-13 17:39:42"
                ],
                _id: "63bd14c40d58511b7c6b6b22",
                title: "跨店满减",
                receiveType: "2",
                price: 300,
                state: true,
                show: true,
                create_time: "2023-01-10T07:33:24.011Z",
                imgSrc: "https://pic2.zhimg.com/v2-12943651b8b7fb48144151e638c8ed81_1440w.jpg?source=172ae18b"
            },
            {
                time: [
                    "2021-01-13 17:39:42",
                    "2023-01-13 17:39:42"
                ],
                useTime: [
                    "2022-01-13 17:39:42",
                    "2022-01-13 17:39:42"
                ],
                _id: "63bd14c40d58511b7c6b6b23",
                title: "中秋现礼券",
                receiveType: "3",
                price: 300,
                state: true,
                show: true,
                create_time: "2023-01-10T07:33:24.011Z",
                imgSrc: "https://pic2.zhimg.com/v2-12943651b8b7fb48144151e638c8ed81_1440w.jpg?source=172ae18b"
            }
        ],
        modelVisible: false,
        updateModelVisible: false,
        item: {},
        updateItem: {},
        currentPage:1,
        pageSize:3
    }

    test = () => {
        console.log(123);
        return "xiaowang"
    }

    changeTime = (time) => {

        const begin = time[0]
        const end = time[1]
        let day1 = new Date(begin)
        let day2 = new Date(end)

        const diffDay = Math.abs(day1 - day2) / 1000 / 60 / 60 / 24
        return diffDay + "天"
    }

    changeType = (value) => {
        switch (value) {
            case "1": return "通用券";
            case "2": return "商品券";
            case "3": return "新人券";
            default: return "门槛券"
        }
    }
    //普通函数
    deleteRow(id) {
        // const {tableData} = this.state
        // 普通函数里面的this默认情况 无法指向指向当前这个组件。undefined
        console.log("tabeData", this);
        console.log("删除指定的行");
    }

    deleteRow2 = (id) => {
        const { tableData } = this.state
        //根据id查询数组这个数据下标
        const index = tableData.findIndex(item => item._id == id)
        console.log(index);
        tableData.splice(index, 1)
        console.log(tableData);
        //数据操作完成页面更新，调用setState
        this.setState({
            tableData
        })
    }

    changeSearchType = (event) => {
        console.log(event.target);
        const value = event.target.value
        this.setState({
            searchType: value
        })
    }

    changeText = (event) => {
        const value = event.target.value
        this.setState({
            searchData: value
        })
    }

    btnSearch = (event) => {
        // const { tableData } = this.state
        console.log("event", event);

    }

    get filterData() {
        const { tableData, searchType, searchData,currentPage,pageSize } = this.state
        // title\receiveType
        return tableData.filter(item => {
            if (!searchType && !searchData) {
                return item
            } else {
                if (item[searchType].indexOf(searchData) != -1) {
                    return item
                }
            }
        })
    }

    addData = () => {
        console.log(123);
        this.setState({
            modelVisible: true
        })
    }
    closeModelParent = () => {
        this.setState({
            modelVisible: false
        })
    }

    openUpdateModel = (id) => {
        //根据id发送请求到后端，拿到这个id对应对象 
        const { tableData } = this.state
        const tempObj = tableData.find(item => item._id == id)
        this.setState({
            updateModelVisible: true,
            updateItem: tempObj
        })
    }

    /**
     * 点击添加按钮
     * @returns 
     */
    addTask = () => {
        const { tableData } = this.state
        console.log(this.formName);
        const name = this.formName.value;
        const price = this.formPrice.value;
        const type = this.formSelect.value;
        // const 

        const data = {
            time: [
                "2021-01-13 17:39:42",
                "2023-01-13 17:39:42"
            ],
            useTime: [
                "2023-01-13 17:39:42",
                "2023-02-13 17:39:42"
            ],
            _id: "63919f95024a7602dc780829",
            title: name,
            receiveType: type,
            price: price,
            state: false,
            show: false,
            system_data: true,
            create_time: "2022-12-08T08:25:57.209Z",
            imgSrc: "https://pic.616pic.com/ys_bnew_img/00/06/12/6QLoLGyq3C.jpg"
        }
        console.log(data);
        //获取到数据添加tableData
        tableData.push(data)
        this.setState({
            tableData,
            modelVisible: false
        })

    }

    /**
     * 事件委托来获取表单元素
     * @param {事件对象} event 
     */
    getFormData = (event) => {
        console.log(event.target);
        const { item } = this.state
        //获取节点身上name属性
        const name = event.target.name;
        const value = event.target.value
        item[name] = value
        this.setState({
            item
        })

    }

    /**
     * 修改
     */
    updateTask = () => {

    }

    /**
     * 接受子组件的分页页码
     * @returns 
     */
    bindEventChildCurrentPage = (value)=>{
        this.setState({
            currentPage:value
        })
    }

    render() {
        // 推荐先render中进行解构，在代码中渲染
        // const {count,dataSource,user,boo,msg,temp} = this.state
        const { tableData, msg, modelVisible, updateModelVisible, updateItem,currentPage,pageSize } = this.state
        const begin = (currentPage-1)*pageSize
        const end = begin + pageSize
        return (
            <div className={styles.box}>
                <div className={styles.search}>
                    <div>
                        <select name="" id="" onChange={this.changeSearchType}>
                            <option value="">请选中搜索类型</option>
                            <option value="title">名字搜索</option>
                            <option value="receiveType">优惠券类型</option>
                        </select>
                    </div>
                    <div>
                        <input onChange={this.changeText} type="text" placeholder='请输入搜索内容' />
                    </div>
                    <div>
                        <button onClick={(event) => this.btnSearch(event, "搜索1")}>搜索1</button>
                        <button onClick={() => this.btnSearch("搜索2")}>搜索2</button>
                        {/* <button @click="show($event,'')"></button> */}
                        <button onClick={this.addData}>添加</button>
                    </div>

                </div>
                <div className={styles.mytable}>
                    <table>
                        <thead>
                            <tr>
                                <th>编号</th>
                                <th>优惠券名称</th>
                                <th>优惠券图片</th>
                                <th>优惠券类型</th>
                                <th>面值</th>
                                <th>使用时间</th>
                                <th>是否开启</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            {/* {this.stateChange()} */}
                            {this.filterData.slice(begin,end).map(item => {
                                return (
                                    <tr key={item._id}>
                                        <td>{item._id}</td>
                                        <td>{item.title}</td>
                                        <td>
                                            <img width="50px" src={item.imgSrc} alt="" />
                                        </td>
                                        <td>{this.changeType(item.receiveType)}</td>
                                        <td>{item.price}</td>
                                        <td>{this.changeTime(item.useTime)}</td>
                                        <td>{item.state ? "是" : "否"}</td>
                                        <td>
                                            <button onClick={() => this.deleteRow2(item._id)}>删除</button>
                                            <button onClick={() => this.openUpdateModel(item._id)}>修改</button>
                                        </td>
                                    </tr>
                                )
                            })}
                            {/* <tr>
                                <td>001</td>
                                <td>新人券</td>
                                <td>
                                    <img width="50px" src="https://5b0988e595225.cdn.sohucs.com/images/20170930/dbce7b6570db42859fe96f794836227f.jpeg" alt="" />
                                </td>
                                <td>001</td>
                                <td>001</td>
                                <td>001</td>
                                <td>001</td>
                                <td>
                                    <button>删除</button>
                                    <button>修改</button>
                                </td>
                            </tr> */}
                        </tbody>
                    </table>
                </div>
                <Pageing changePage={this.bindEventChildCurrentPage} currentPage={currentPage} pageSize={pageSize} total={this.filterData.length}></Pageing>
                {/* 弹框组件 */}
                <Model close={this.closeModelParent} modelVisible={modelVisible} min={4} max="true">
                    <div onChange={this.getFormData}>
                        <div className='item'>
                            <label htmlFor="">优惠券名字：</label>
                            {/* ref={function(input){
                                this.element = input
                            }} */}
                            <input name='title' type="text" ref={input => this.formName = input} placeholder="请输入名字" />
                        </div>
                        <div className='item'>
                            <label htmlFor="">优惠券价格：</label>
                            <input name='price' type="text" ref={input => this.formPrice = input} placeholder="请输入名字" />
                        </div>
                        <div className='item'>
                            <label htmlFor="">优惠券类型：</label>
                            <select name="receiveType" id="" ref={input => this.formSelect = input}>
                                <option value="1">通用券</option>
                                <option value="2">商品券</option>
                                <option value="3">新人券</option>
                            </select>
                        </div>
                        <div>
                            <button onClick={this.addTask}>添加</button>
                        </div>
                    </div>
                </Model>
                <Model modelVisible={updateModelVisible} min={4} max="true">
                    <div>
                        <div className='item'>
                            <label htmlFor="">优惠券名字：</label>
                            {/* ref={function(input){
                                this.element = input
                            }} */}
                            <input defaultValue={updateItem.title} name='title' type="text" ref={input => this.formName = input} placeholder="请输入名字" />
                        </div>
                        <div className='item'>
                            <label htmlFor="">优惠券价格：</label>
                            <input defaultValue={updateItem.price} name='price' type="text" ref={input => this.formPrice = input} placeholder="请输入名字" />
                        </div>
                        <div className='item'>
                            <label htmlFor="">优惠券类型：</label>
                            <select defaultValue={updateItem.receiveType} name="receiveType" id="" ref={input => this.formSelect = input}>
                                <option value="1">通用券</option>
                                <option value="2">商品券</option>
                                <option value="3">新人券</option>
                            </select>
                        </div>
                        <div>
                            <button onClick={this.updateTask}>修改</button>
                        </div>

                    </div>
                </Model>


            </div>
        )
    }
}
